<template>
  <div v-loading="loading" :style="selfStyle">
    <template v-if="!loading">
      <el-button-group v-if="element.props.modelType === 'manager'">
        <el-button :disabled="labDesign.switch" type="primary" icon="el-icon-circle-plus-outline" :loading="loading" @click="() => { dataSource.splice(0, 0, {})}">数据添加</el-button>
        <el-button :disabled="labDesign.switch" type="success" icon="el-icon-check" :loading="loading" @click="saveModelData">数据保存</el-button>
        <el-button :disabled="labDesign.switch" type="danger" icon="el-icon-delete" :loading="loading" @click="removeModelData">数据删除</el-button>
        <el-button :disabled="labDesign.switch" type="warning" icon="el-icon-download" :loading="loading" @click="exportExcel">导出excel</el-button>
        <el-button :disabled="labDesign.switch" type="info" icon="el-icon-upload2" :loading="loading" @click="visible = true">excel导入</el-button>
      </el-button-group>
      <lab-element v-for="(item,index) in element.elements" :key="item.key" :element="item" :elements="element.elements" :index="index" />
      <el-dialog :visible.sync="visible" width="450px" style="text-align: center">
        <el-upload
            :action="uploadUrl"
            :headers="headers"
            :on-success="uploadSuccess"
            :show-file-list="false"
            drag
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能xlsx文件，且不超过2000行</div>
        </el-upload>
      </el-dialog>
    </template>
  </div>
</template>

<script>

import LabModel from "../../mixins/LabModel";

export default {
  name: "LabModel",
  mixins: [ LabModel ],
  data () {
    return {
      visible: false,
    }
  },
  computed: {
    uploadUrl () {
      return this.$Util.mergeUrl(process.env.VUE_APP_BASE_API, '/model/importExcel/' + this.modelInfo.callCmd)
    },
    headers () {
      return { Authorization: 'Bearer ' + this.$AuthStorage.getAccessToken() }
    }
  },
  created() {
    this.$LabRender.autoFill(this.element, this)
    this.loadModel()
  },
  methods: {
    saveModelData() {
      const { selectRowIds, dataSource, rowKey, pageInfo } = this.$refs.tableRef
      if (selectRowIds.length === 0) {
        this.$resultMsg(this, { msg: '请选择数据'})
        return
      }
      pageInfo.datas = dataSource.filter(item => selectRowIds.includes(item[rowKey]))
      this.executeMethod('model/saveData')
    },
    removeModelData() {
      const { selectRowIds, dataSource, rowKey, pageInfo } = this.$refs.tableRef
      if (selectRowIds.length === 0) {
        this.$resultMsg(this, { msg: '请选择数据'})
        return
      }
      this.$confirm('此操作将会删除数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        pageInfo.datas = dataSource.filter(item => selectRowIds.includes(item[rowKey]))
        this.executeMethod('model/deleteData')
      })
    },
    executeMethod(url) {
      this.loading = true
      const { pageInfo } = this.$refs.tableRef
      this.$post(url, pageInfo)
          .then(res => {
            pageInfo.datas = []
            this.$resultMsg(this, res)
            if (res.code === 200) {
              this.$refs.tableRef.loadSource()
            }
            setTimeout(() => {
              this.loading = false
            }, 200)
          })
    },
    exportExcel() {
      const { pageInfo } = this.$refs.tableRef
      const query = this.$Util.base64Encode(JSON.stringify(pageInfo))
      const url = this.$Util.mergeUrl(process.env.VUE_APP_BASE_API, '/model/exportExcel')
      window.open(url + this.modelInfo.callCmd + '?query=' + query + '&access_token=' + this.$AuthStorage.getAccessToken())
    },
    uploadSuccess (response) {
      this.$resultMsg(this, response)
      if (response.code === 200) {
        this.$refs.tableRef.loadSource()
        this.visible = false
      }
    },
  }
}
</script>

<style scoped>

</style>
